<template>
  <div>
    <!-- <h1>任务列表</h1> -->
     <div style="display: flex;">
       <el-form-item label="年级:" style="width: 15%; margin-left: 2%;">
         <el-select clearable v-model="formInline.gradeLevel" placeholder="年级" size="large">
           <el-option v-for="item in levelstore.list" :key="item.value" :label="item.name" :value="item.value" />
         </el-select>
       </el-form-item>
       <el-button style="margin-left: 2%;" type="primary" size="large" @click="onSubmit">查询</el-button>

     </div>
    <div style="padding: 20px;">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="title" label="标题" width="80" />
        <el-table-column prop="gradeLevel" label="学级" width="120" >
          <template #default="scope">
            <span v-for="item in levelstore.list" :key="item.value">
              <span v-if="scope.row.gradeLevel == item.value">{{ item.name }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="createUserName" label="发送人" width="120" />
        <el-table-column prop="createTime" label="创建时间" min-width="180" />
        <el-table-column fixed="right" label="操作" width="240">
          <template #default>
            <el-button @click="handleClick">编辑</el-button>
            <el-button type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bt">
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
          :page-sizes="[5, 10, 20, 30, 40]" :size="size" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'
import type { ComponentSize } from 'element-plus'
import { useLevelStore } from "@/stores/level"
// const tableData = ref([])
const handleClick = () => {
  console.log('click')
}
//表单参数
const formInline = ref({
  gradeLevel: "",
  subjectId: '',
  id: "",
  pageIndex: 1,
  pageSize: 10,
})
//总页数
const total = ref(0)
//pinia的数据
const levelstore = useLevelStore()
//表单数据
const tableData = ref([])
console.log(tableData, 'tabledata');
const currentPage4 = ref(4)
const pageSize4 = ref(10)
const size = ref<ComponentSize>('default')
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

function gettaskList() {
  axios({
    url: "/api/api/admin/task/page",
    method: "post",
    data: formInline.value
  }).then(res => {
    console.log(res.data)
    if (res.data.message == "成功") {
      tableData.value = res.data.response.list
      total.value = res.data.response.total || 0

    }
  })
}
gettaskList()
//搜索
const onSubmit = () => {
    console.log('submit');
    console.log(formInline.value);
    gettaskList()
}
</script>

<style>
.bt {
  margin-left: 0;
  display: flex;
  justify-content: flex-start;
}

.btr {
  width: 90px;
  display: flex;
  justify-content: space-between;
}
</style>
